<template>
  <a-drawer :open="true" :title="`${item ? '编辑' : '添加'}客户`" @close="onClose">
    <a-form ref="formRef" :model="formState" layout="vertical" :rules="rules">

      <a-form-item label="名称" name="name">
        <a-input v-model:value="formState.name" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="昵称" name="nickName">
        <a-input v-model:value="formState.nickName" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="手机号" name="purePhoneNumber">
        <a-input v-model:value="formState.purePhoneNumber" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="性别" name="gender">
        <a-radio-group v-model:value="formState.gender">
          <a-radio :value="0">未知</a-radio>
          <a-radio :value="1">男</a-radio>
          <a-radio :value="2">女</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="国家" name="country">
        <a-input v-model:value="formState.country" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="省份" name="province">
        <a-input v-model:value="formState.province" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="城市" name="city">
        <a-input v-model:value="formState.city" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="openid" name="openid">
        <a-input v-model:value="formState.openid" disabled />
      </a-form-item>
      <a-form-item label="sessionKey" name="sessionKey">
        <a-input v-model:value="formState.sessionKey" disabled />
      </a-form-item>
      <a-form-item label="anonymousOpenid" name="anonymousOpenid">
        <a-input v-model:value="formState.anonymousOpenid" disabled />
      </a-form-item>
      <a-form-item label="unionid" name="unionid">
        <a-input v-model:value="formState.unionid" disabled />
      </a-form-item>

      <a-form-item label="备注" name="remark">
        <a-textarea v-model:value="formState.remark" placeholder="请输入" />
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button type="primary" @click="toSave" :loading="saving">保存</a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </a-drawer>
</template>

<script setup>
import { reactive, onMounted, ref } from 'vue'
import { saveClient } from '@/api/client';
import { message } from 'ant-design-vue'
import { confirm } from '@/mixin'

const props = defineProps(['item'])
const emit = defineEmits(['close', 'saved'])

const rules = {

}

const formRef = ref(null)
const formState = reactive({})
const saving = ref(false)

onMounted(() => {
  parseItem()
})

const parseItem = () => {
  const it = props.item
  if (it) {

    formState.name = it.name
    formState.nickName = it.nickName
    formState.phoneNumber = it.phoneNumber
    formState.purePhoneNumber = it.purePhoneNumber
    formState.countryCode = it.countryCode
    formState.avatarUrl = it.avatarUrl
    formState.gender = it.gender
    formState.country = it.country
    formState.province = it.province
    formState.city = it.city
    formState.language = it.language
    formState.openid = it.openid
    formState.sessionKey = it.sessionKey
    formState.anonymousOpenid = it.anonymousOpenid
    formState.unionid = it.unionid
  } else {
    formState.name = null
    formState.nickName = null
    formState.phoneNumber = null
    formState.purePhoneNumber = null
    formState.countryCode = null
    formState.avatarUrl = null
    formState.gender = null
    formState.country = null
    formState.province = null
    formState.city = null
    formState.language = null
    formState.openid = null
    formState.sessionKey = null
    formState.anonymousOpenid = null
    formState.unionid = null
  }
}

const onClose = () => {
  emit('close')
}

const toSave = () => {
  formRef.value.validate().then(values => {


    confirm('您确定要保存客户信息吗?', async () => {
      if (props.item) {
        values.id = props.item.id
      }
      saving.value = true
      const res = await saveClient(values)
      saving.value = false
      if (res.data) {
        message.success('保存成功')
        emit('saved')
      } else {
        message.error('保存失败')
      }
    })
  })
}
</script>

<style lang="less" scoped></style>